import router from '@/router'
import store from '@/store'
import nProgress from 'nprogress' // 引入nProgress
import 'nprogress/nprogress.css' // 引入进度条样式

import getPageTitle from './utils/get-page-title'
import { asyncRoutes } from '@/router/index.js'

// to:要去哪里
// from:从哪里来
// next:他是一个函数
//   如果直接放行  next()
//   如果跳转其他页 next('其他页')
// 设置白名单
const whiteList = ['/login', '/404']
router.beforeEach(async(to, from, next) => {
  // 动态路由管理
  // document.title = '人力资源管理系统-' + to.meta.title
  document.title = getPageTitle(to.meta.title)

  // console.log(to.path,'去哪里');
  // console.log(from.path,'从哪里来');
  nProgress.start() // 开启进度条
  const token = store.state.user.token
  if (token) {
    if (to.path === '/login') {
      // console.log('已经登录过了,不能再去登录页了');
      next('/') // next如果指定了地址进行跳转,那么就不会经过router.afterEach
      nProgress.done()
    } else {
      // console.log('去别的地方放行');
      // 判断vuex里面有没有存入数据
      if (!store.state.user.userInfo.username) {
        // 1.调用actions函数,获取用户信息存储到vuex中
        const menus = await store.dispatch('user/setUserInfo')
        // 在这里获取权限信息,动态设置可以自由访问的路由,设置左侧菜单
        console.log(menus, 'menus')
        console.log(asyncRoutes, 'asyncRoutes')
        const filterRoters = asyncRoutes.filter(item => {
          return menus.includes(item.children[0].name)
        })
        console.log(filterRoters)
        // 动态添加路由
        filterRoters.push({ path: '*', redirect: '/404', hidden: true })
        router.addRoutes(filterRoters)
        // 将拥有权限的路由表存入vuex中
        store.commit('menu/setMenusList', filterRoters)
        // 白屏的问题是因为页面刷新的时候会重新执行addRoustes,而addRoustes没有执行完成
        // 如果直接使用next()放行就会出现白屏问题,那么需要在next中设置{...to, replace: true}
        // 保证addRoustes的动态路由添加完成,再访问页面
        next({ ...to, replace: true })
      }
      next() // 放行首页
    }
  } else {
    // 没有登录
    // 判断是否有白名单
    // whiteList.includes()判断传入的内容在不在数组内,返回值是布尔值(boolean)
    if (whiteList.includes(to.path)) {
      // console.log('有白名单,直接放行')
      next()
    } else {
      // console.log('没有登录,没有白名单登录')
      next('/login')
    }
  }
})

// 页面跳转完成会经过这里
router.afterEach(() => {
  nProgress.done() // 关闭进度条
})
